<template>
  <div class="about-box">
    <p class="title">{{$t("about.title")}}</p>
    <div class="description">
      <p>{{$t("about.description1")}}</p>
      <p>{{$t("about.description2")}}</p>
      <p>{{$t("about.description3")}}</p>
      <p>{{$t("about.description4")}}</p>
    </div>
  </div>
  <div class="other">
    <p class="link">{{$t("about.link")}}</p>
    <a href="http://120.48.46.59:5055/" target="_blank">{{$t("about.web1")}}</a><span>|</span>
    <a href="http://120.48.46.59:8088/" target="_blank">{{$t("about.web2")}}</a><span>|</span>
    <a href="https://web.ssssmall.com/" target="_blank">{{$t("about.web3")}}</a>
  </div>
</template>

<style lang="scss" scoped>
.about-box {
  color: $themeFontColor;
  flex: 1;

  .title {
    font-size: 28px;
    text-align: center;
    margin: 28px 0;
  }

  .description {
    margin: 12px;

    p {
      margin-bottom: 8px;
    }
  }
}

.other {
  margin: 12px;
  color: $themeFontColor;
  @include vC;
  font-size: 16px;

  .link {
    font-size: 16px;
    margin-right: 16px;
  }

  span {
    padding: 0 12px;
  }

  a {
    text-decoration: underline;
    cursor: pointer;
    color: $themeFontColor;
  }

  a:hover {
    color: $themeColor;
  }

  a:active {}
}
</style>
